<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=8"><!--以IE8模式渲染-->
    <title> 后端管理系统</title>
    <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="./js/html5.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->
</head>
<body id="container">
<nav>
    <ul>
        <li>
            <i class="fa fa-navicon fa-lg toggle-nav" style="font-size: 25px;"></i>
            <a href="" class="a-logo">水晶球教育后台管理系统</a>
        </li>
        <li class="nav-li-manage">
            <img class="manage_avatar" src="http://demo.mycodes.net/houtai/AdminLTE/dist/img/user2-160x160.jpg" alt="">
            <a href="#">管理员</a>
            <span class="fa  fa-caret-right arrow" style="float: right;line-height: 55px"></span>
            <ul>
                <li>个人资料</li>
                <li>修改密码</li>
                <li>设置</li>
                <li>登出</li>
            </ul>
        </li>
    </ul>
</nav>
<section>
    <div id="sidebar">
        <ul class="sidebar-menu">
            <li>
                <a href="index.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="tab.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>tab页</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>系统管理</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="manage_user.html">系统用户管理</a></li>
                    <li><a class="" href="users.html">用户管理</a></li>
                </ul>
            </li>
            <li>
                <a href="awesome.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>font-awesome</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>常用 UI组件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="button.html">按钮</a></li>
                    <li><a class="" href="form.html">表单</a></li>
                    <li><a class="" href="table.html">表格</a></li>
                </ul>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>Jquery 插件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="datatables.html">datatables 表格</a></li>
                    <li><a class="" href="select2.html">select2 下拉框</a></li>
                    <li><a class="" href="layui.html">layui 弹出层</a></li>
                </ul>
            </li>

        </ul>
    </div>
    <section class="wrapper toggle-wrapper">
        <div class="manege_title">
            <h1>水晶球教育</h1>
            <span>系统用户管理</span>
        </div>
        <button class="btn btn-default btn-primary">新增管理员</button>
        <div>
            <table id="manage_tables">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>用户类型</th>
                    <th>姓名</th>
                    <th>联系方式</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>


    </section>

</section>


<!--一下是模板html-->
<!--编辑用户-->
<div class="div_update" style="display: none">
    <h2 style="margin: 10px">修改用户</h2>
    <table class="table_update">
    </table>
    <style>
        .table_update {
            width: 70%;
            margin: auto;
        }

        .table_update input {
            margin-left: 15px;
            margin-top: 15px;
            padding: 8px;
            width: 70%;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .table_update span {
            font-weight: 700;
            text-align: right;
            width: 100px;
            display: inline-block;
        }
    </style>
</div>

<!--编辑按钮-->
<div class="button" style="display: none">
    <button class="btn btn-default btn-success">修改</button>
    <button class="btn btn-default btn-danger">删除</button>
    <style>
        .manege_title h1 {
            display: inline-block;
        }

        .manege_title span {
            font-size: 15px;
            color: #7e7e7e;
            font-weight: 700;
        }
    </style>
</div>

</body>
<script src="js/jquery.js"></script>
<script src="js/zhao.js"></script>
<script src="js/datatables/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="./js/datatables/css/jquery.dataTables.min.css">
<script src="js/layer/layer.js"></script>
<script>
    /*配置项*/
    var manage_obj = [
        {"用户名": "svenzhao", "用户类型": "管理员", "姓名": "姓名", "联系方式": "123456789", "邮箱": "2714265555@qw.com"},
        {"用户名": "ssaq", "用户类型": "管理员", "姓名": "爱上", "联系方式": "123456789", "邮箱": "sdsa@qw.com"},
        {"用户名": "sadfgfg", "用户类型": "管理员", "姓名": "萨达", "联系方式": "123456789", "邮箱": "sadsad@qw.com"},
        {"用户名": "12234123", "用户类型": "管理员", "姓名": "读取", "联系方式": "151548487", "邮箱": "sadasd@qw.com"}
    ];
    var language = {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    };


    /*table*/
    var $manage_table = $('#manage_tables');
    /*new data_table*/
    var table_datatable = $manage_table.DataTable({
        data: manage_obj,
        /*关闭选择显示数*/
        lengthChange: false,
        /*国际化*/
        language: language,
        /*自定义动态渲染列*/
        "columnDefs": [
            {
                "render": function (data, type, row) {
                    return $(".button").html()
                },
                "targets": 5
            }
        ],
        columns: [
            {data: '用户名'},
            {data: '用户类型'},
            {data: '姓名'},
            {data: '联系方式'},
            {data: '邮箱'}
        ]
    });


    $manage_table.on('click', '.btn-danger', function () {
        $(this).parents("tr").html("")
    });
    $manage_table.on('click', '.btn-success', function () {
        /*获取当前点击表单的行数*/
        var row = table_datatable.row($(this).parents("tr"));
        /*行数据*/
        var rowdata = row.data();
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            title: false, //不显示标题
            area: ['600px', '500px'], //宽高
            content: $('.div_update').html(),
            success: function (dom) {
                /*动态载入dom*/
                $(dom).find("table").html(
                        "  <tr> <td><span>用户名:</span> <input type='text' value='" + rowdata.用户名 + "'data-key='用户名' ></td> </tr>" +
                        "  <tr> <td><span>用户类型:</span> <input type='text' value='" + rowdata.用户类型 + "'data-key='用户类型' ></td> </tr>" +
                        "  <tr> <td><span>姓名:</span> <input type='text' value='" + rowdata.姓名 + "'data-key='姓名' ></td> </tr>" +
                        "  <tr> <td><span>联系方式:</span> <input type='text' value='" + rowdata.联系方式 + "'data-key='联系方式' ></td> </tr>" +
                        "  <tr> <td><span>邮箱:</span> <input type='text' value='" + rowdata.邮箱 + "'data-key='邮箱' ></td> </tr>"
                );
                /*更新后的数据*/
                $(dom).on("change", "table input", function () {
                    $(dom).find("input").each(function () {
                        var key = $(this).attr("data-key");
                        rowdata[key] = $(this).val();
                    })
                })
            },
            btn: ['修改', '取消'],
            btn1: function () {
                /*更改本地数据*/
                row.data(rowdata)
            }
        });
    });
    $(".btn-primary").click(function () {
        var new_user = {};
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            title: false, //不显示标题
            area: ['600px', '500px'], //宽高
            content: $('.div_update').html(),
            success: function (dom) {
                $(dom).find("h2").html("新增管理员")
                /*动态载入dom*/
                $(dom).find("table").html(
                        "  <tr> <td><span>用户名:</span> <input type='text' value=''data-key='用户名' ></td> </tr>" +
                        "  <tr> <td><span>用户类型:</span> <input type='text' value=''data-key='用户类型' ></td> </tr>" +
                        "  <tr> <td><span>姓名:</span> <input type='text' value=''data-key='姓名' ></td> </tr>" +
                        "  <tr> <td><span>联系方式:</span> <input type='text' value=''data-key='联系方式' ></td> </tr>" +
                        "  <tr> <td><span>邮箱:</span> <input type='text' value=''data-key='邮箱' ></td> </tr>"
                );
                /*更新后的数据*/
                $(dom).on("change", "table input", function () {
                    $(dom).find("input").each(function () {
                        var key = $(this).attr("data-key");
                        new_user[key] = $(this).val();
                    });
                });
            },
            btn: ['修改', '取消'],
            btn1: function () {
                /*更改本地数据*/
                table_datatable.row.add(new_user).draw()
            }
        });
    })
</script>
</html>